<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p>{{c}}</p>
      <p>{{bigC}}</p>
      <p>{{obj}}</p>
      <button @click="c = 5">按钮</button>
      <button @click="obj={name:'ls'}">修改obj</button>
    </div>

    <script src="./vue.js"></script>

    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          c: 1,
          bigC: 0,
          obj: {
            name: 'zs',
          },
        },
        watch: {
          c: {
            immediate: true, // 让handler在初始化的时候就先执行一次
            // handler是在监听的数据发生的时候执行
            handler(newValue, oldValue) {
              // newValue 是新值
              // oldValue 是旧的值
              // this还是vue实例
              // console.log(newValue, oldValue, this.c)
              this.bigC = newValue * 10
            },
          },

          // obj: {
          //   deep: true,
          //   handler() {
          //     console.log('obj的值被修改了', this.obj)
          //   },
          // },

          // 假设obj不需要深度监听,也不需要立刻执行.只需要一个handler,则obj就可以简写为函数
          // obj(newValue, oldValue) {
          //   console.log('obj的数据发生变化了', newValue, oldValue, this)
          // },
        },
      })
      // 监视属性,另一种写法
      vm.$watch('obj', function (newValue, oldValue) {
        console.log('obj的数据发生变化了', newValue, oldValue, this)
      })
    </script>
  </body>
</html>
